<template>
  <div class="box">
    <div class="class_mid">
    <van-nav-bar
      title="全部考卷"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
      style="width:100%"
    />
    </div>
    <div class="two">
      <van-list
        v-model="newloading"
        :finished="newfinished"
        finished-text="没有更多了"
        :offset="0"
        @load="newonLoad">
     <van-grid class="zong">
      <van-grid-item class="da" v-for="(item,ind) in exemList" :key="ind" @click="nextExemDetail(item.id)">
        <div slot="default" class="gong">
          <div slot="icon" class="gong_tu">
            <img :src="'http://upenglish.ayvvv.cn'+item.testpaperimage" alt="">
          </div>
          <div slot="text" class="gong_zi">
            <span>{{ item.testpapername }}</span>
          </div>
        </div>
      </van-grid-item>
    </van-grid>
      </van-list>
    </div>
  </div>
</template>

<script>
import { buyExemed } from '@/api/question.js'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      exemList: [],
      newloading: false,
      newfinished: false,
      page: 1,
      alltestlist: []
    }
  },

  created () {
    this.getBuyExemed()
  },
  computed: {
    ...mapState(['id'])
  },
  methods: {
    async getBuyExemed () {
      const { data } = await buyExemed({
        userid: this.id
      })
      // console.log(data)
      this.exemList = data.allbuytestpaper.data
    },
    nextExemDetail (id) {
      this.$router.push({ path: `/exemDetail/${id}` })
    },
    async newonLoad () {
      const data = await buyExemed({
        userid: this.id,
        page: this.page
      })
      this.alltestlist.push(...data.data.allbuytestpaper.data)
      this.exemList = [...new Set(this.alltestlist)]
      this.newloading = false
      if (this.page < data.data.allbuytestpaper.last_page) {
        this.page++
      }
      if (this.exemList.length >= data.data.allbuytestpaper.total) {
        this.newfinished = true
      }
    }
  }
}
</script>

<style scoped lang='less'>
.gong {
  text-align: center;
  .gong_tu img {
    width: 150px;
    height: 150px;
  }
  .gong_zi span {
    font-size: 14px;
  }
}
.da {
  margin-right: 3.5%;
  margin-left: 3.5%;
  box-shadow: 0px 0px 10px #ccc;
  margin-bottom: 20px;
}
.box {
  padding: 20px;
}
.van-grid-item__content--center {
  margin: 20px;
}
.van-grid-item__content {
  position: relative;
  padding: 10px;
  padding-bottom: 50px;
}
.zong{
  margin-top:20px;
  display: flex;
  padding-top: 10px;
}
</style>
